<template>

   <div>
     <el-form :inline="true" :model="formInline" class="demo-form-inline">
       <el-form-item label="商品名称">
         <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
       </el-form-item>
     </el-form>
     <el-row>

       <el-col :span="5" v-for="(o, index) in tableData" :key="o" :offset="index > 0 ? 1 : 5">
         <el-card :body-style="{ padding: '8px' }">
             <img :src="o.pic" class="image" style="width: 200px;margin: auto">
             <a v-html="o.name"></a><br><br>
           <div style="padding: 10px;">
             <div>p
               <span style="display: inline-block;float:left;">{{o.description}}</span><br><br>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <span style="color: #dc143c">￥:{{o.originalPrice}}</span>&nbsp;&nbsp;
               <span><el-button type="primary" @click="xq(o.detailHtml)">详情</el-button></span>
               <el-button type="primary" @click="addCart(o.id)">加入购物车</el-button>
             </div>
           </div>
         </el-card>
       </el-col>
     </el-row>

   </div>
</template>


<script>
import {fetchList, getObj, addObj, putObj, delObj,addCart,list} from '@/api/product/pmsproduct'
import {tableOption} from '@/const/crud/product/pmsproduct'
import {mapGetters} from 'vuex'
import store from "@/store";
export default {
  data() {
    return {

      currentDate: new Date(),
      myToken:{
        Authorization : 'Bearer ' +store.getters.access_token
      },
      tableData: [],
      multipleSelection: [],
      total: 0, // 总页数
      formInline: {
        name: '',
      },

      title:"",
      open:false,
      loading:true,

    }
  },

  methods: {
    xq(val){
      console.log(val);
      window.open(val);
    },
    onSubmit() {
      console.log('submit!');
      this.getList()
    },
    //加入购物车
    addCart(id){
      console.log(id)
      addCart(id).then(respone=>{
          this.$message.success('添加成功')

      });
    },

    getList() {
      list(this.formInline).then(response => {
        console.log(response.data.data)
        this.tableData = response.data.data
      })
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  created() {
    this.getList()
  }
}

</script>


<style>
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
